<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="12">
        <div class="grid-content small">
          <div class="small_top">
            <p>收入概况</p>
            <ul>
              <li @click="tradingNum(1,num,text,1)" :class="[isActive1==1?'liColor':'' ]">今日</li>
              <li @click="tradingNum(2,num,text,1)" :class="[isActive1===2?'liColor':'' ]">7日</li>
              <li @click="tradingNum(3,num,text,1)" :class="[isActive1===3?'liColor':'' ]">30日</li>
            </ul>
          </div>
          <br><br>
          <div class="small_content">

            <div v-for="item in tradingArrData" :key="item.index">
              <p class="text">{{item.text}}</p>
              <p class="num">{{item.num}}</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content small">
          <div class="small_top">
            <p>订单概况</p>
            <ul>
              <li @click="tradingNum(1,num2,text2,2)" :class="[isActive2==1?'liColor':'' ]">今日</li>
              <li @click="tradingNum(2,num2,text2,2)" :class="[isActive2===2?'liColor':'' ]">7日</li>
              <li @click="tradingNum(3,num2,text2,2)" :class="[isActive2===3?'liColor':'' ]">30日</li>
            </ul>
          </div>
          <br><br>
          <div class="small_content">

            <div v-for="item in tradingArrData2" :key="item.index">
              <p class="text">{{item.text}}</p>
              <p class="num">{{item.num}}</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <div class="grid-content big" id="left">

        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content big" id="right"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Welcome',
  data () {
    return {
      isActive1: 1,
      isActive2: 1,
      tradingArrData: [],
      text: ['支付', '收入', '退款'],
      num: [2098.0, 3096.0, 3123, 4, 5, 6, 7, 8, 9],
      tradingArrData2: [],
      text2: ['支付订单', '核销订单', '退款订单'],
      num2: [38, 41, 2, 123, 45, 12, 793, 82, 59],
      //echart图1
      option1: {
        xAxis: {
          data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
        },
        yAxis: {},
        legend: {
          bottom: 10,
          left: 'center',
          data: ['pay', 'income', 'refund']
        },
        tooltip: {},
        title: {
          text: '收入趋势'
        },
        series: [
          {
            name: 'pay',
            data: [10, 22, 40, 43, 49, 13, 22, 33],
            type: 'line',
          },
          {
            name: 'income',
            data: [5, 30, 1, 5, 10, 13, 12, 4],
            type: 'line',
          },
          {
            name: 'refund',
            data: [15, 10, 12, 15, 10, 14, 12, 11],
            type: 'line',
          }
        ]
      },
      //echart图2
      option2: {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['zhifu', 'heixiao', 'tuidan']
        },
        tooltip: {},
        title: {
          text: '订单趋势'
        },
        xAxis: {
          data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
        },
        yAxis: {},
        series: [
          {
            name: 'zhifu',
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          },
          {
            name: 'heixiao',
            type: 'bar',
            data: [11, 12, 18, 14, 13, 20, 17]
          },
          {
            name: 'tuidan',
            type: 'bar',
            data: [2, 3, 4, 2, 4, 2, 1]
          }
        ]
      }
    }
  },
  computed: {

  },
  methods: {
    dealTradingArrData (num, nums, texts, type) {
      let a = num;
      let start = (a - 1) * 3
      let end = start + 3
      let j = 0
      let arr = []
      for (let i = start; i < end; i++) {
        let obj = {}
        obj.text = texts[j++];
        obj.num = nums[i]
        arr.push(obj)
      }
      if (type === 1) {
        this.tradingArrData = arr
      } else {
        this.tradingArrData2 = arr
      }
    },
    tradingNum (num, nums, texts, type) {
      if (type === 1) {
        this.isActive1 = num
      } else {
        this.isActive2 = num
      }
      this.dealTradingArrData(num, nums, texts, type)
    },

    draw (contain, val) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(contain));

      // 绘制图表
      myChart.setOption(val)
    }
  },
  mounted () {
    // 格式二
    // this.tradingArrData = this.tradingArr.slice(0, 3)
    // 格式一
    this.dealTradingArrData(1, this.num, this.text, 1)
    this.dealTradingArrData(1, this.num2, this.text2, 2)
    this.draw('left', this.option1)
    this.draw('right', this.option2)
  },
  computed: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  border: 1px solid rgb(215, 215, 215);
  // background-color: aqua;
}
.small {
  & {
    padding: 0 20px;
  }
  .small_top {
    & {
      overflow: hidden;
    }
    p {
      float: left;
      font-weight: bold;
    }
    ul {
      float: right;
      li {
        list-style: none;
        width: 50px;
        float: left;
      }
      .liColor {
        color: rgb(199, 138, 255);
      }
      li:hover {
        color: rgb(199, 138, 255);
        cursor: pointer;
      }
    }
  }
  .small_content {
    & {
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20px;
    }
    div {
      .text {
        margin-top: 0px;
        font-size: 1rem;
        color: rgb(185, 178, 180);
        text-align: center;
      }
      .num {
        margin-top: 1px;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
.big {
  min-height: 300px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
